<template>
	<div>
		<Affix>
			<span class="demo-affix">Fixed at the top</span>
		</Affix>

		<Affix :offset-top="100">
			<span class="demo-affix">Fixed at the top 100px from the top</span>
		</Affix>

		<Affix :offset-bottom="20">
			<span class="demo-affix">Fix at the bottom 20px</span>
		</Affix>

		<Alert banner type="warning">Notice: notification contents...</Alert>
		<Alert banner closable type="warning">Notice: notification contents...</Alert>

		<Alert show-icon>An info prompt</Alert>
		<Alert type="success" show-icon>A success prompt</Alert>
		<Alert type="warning" show-icon>A warning prompt</Alert>
		<Alert type="error" show-icon>An error prompt</Alert>
		<Alert show-icon>
			An info prompt
			<template
				slot="desc"
			>Content of prompt. Content of prompt. Content of prompt. Content of prompt.</template>
		</Alert>
		<Alert type="success" show-icon>
			A success prompt
			<span
				slot="desc"
			>Content of prompt. Content of prompt. Content of prompt. Content of prompt.</span>
		</Alert>
		<Alert type="warning" show-icon>
			A warning prompt
			<template slot="desc">Content of prompt. Content of prompt. Content of prompt.</template>
		</Alert>
		<Alert type="error" show-icon>
			An error prompt
			<span slot="desc">Custom error description copywriting.</span>
		</Alert>
		<Alert show-icon>
			Custom icon
			<Icon type="ios-bulb-outline" slot="icon"></Icon>
			<template slot="desc">Custom icon copywriting. Custom icon copywriting. Custom icon copywriting.</template>
		</Alert>
	</div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from "vue-property-decorator";
  @Component
	export default class AffixTest extends Vue {}
</script>

<style>
</style>